
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: ScrollView: Horizontal ScrollView</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
    /*Supplemental CSS for the YUI distribution*/
    #custom-doc { width: 95%; min-width: 950px; }
    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
/*    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>

</head>
<body id="yahoo-com" class="yui3-skin-sam  yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p>
            <em>
                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>	
            </em>
		</p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
            <input name="vs" type="hidden" value="developer.yahoo.com">
            <input name="vs" type="hidden" value="yuiblog.com">
			<input name="vs" type="hidden" value="yuilibrary.com">
		    <div id="sitesearch">
		    	<label for="searchinput">Site Search (YDN, YUILibrary &amp; YUIBlog): </label>
			    <input type="text" id="searchinput" name="p">
			    <input type="submit" value="Search" id="searchsubmit" class="ygbt">
		    </div>
		</form>
    </div>
	<div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: ScrollView: Horizontal ScrollView</h1></div>
</div>
<div id="bd">


	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example" id="main">

	<h2>ScrollView: Horizontal ScrollView</h2>

	<div id="example" class="promo">
	<div class="example-intro">
	<p>This example shows how to create a ScrollView widget which scrolls horizontally.</p>	</div>

	<div class="module example-container  newWindow">
			<div id="example-canvas" class="bd">

		<p class="newWindowButton yui-skin-sam">
        <span id="newWindowLink">
            <span class="first-child">
                <a href="scrollview-horiz_source.html" target="_blank">View example in new window.</a>
            </span>
        </span>
    </p>

	
		</div>
	</div>
	</div>

	<h2>A Horizontal ScrollView</h2>

<p>In this example, we'll create a ScrollView instance, which scrolls horizontally, as opposed to the vertically scrolling ScrollView we created in the <a href="scrollview.html">ScrollView With Scroll Indicator</a> example.</p>

<p>The code for the example is pretty much the same as the code for the <a href="scrollview.html">ScrollView With Scroll Indicator</a> example. The only difference is that instead of having a ScrollView with a fixed height (and content which overflows that height), we set up a ScrollView with a fixed width (and content which overflows that width).</p>

<h3>Modules Used</h3>

<p>Since we want to use the base ScrollView, along with the ScrollViewScrollbars plugin, we use the <code>scrollview</code> module as we did for the vertical ScrollView example:</p>

<div id="syntax-f07ec21b2c38f11516c19321f0f3d861" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">'scrollview'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    ...</div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">'scrollview'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    ...
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;</pre></div><textarea id="syntax-f07ec21b2c38f11516c19321f0f3d861-plain">YUI().use('scrollview', function(Y) {
    ...
});
</textarea></div>
<h3>Instantiating The ScrollView Widget</h3>

<p>As with the vertical <a href="scrollview.html">ScrollView</a> example, we provide the markup for the ScrollView content on the page, as shown below:</p>

<div id="syntax-5cd930474ff67af2104ace2e5e4adf7f" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="sy0">&lt;!--</span> Content <span class="kw1">with</span> a width which would require scrolling <span class="sy0">--&gt;</span></div></li><li class="li1"><div class="de1"><span class="sy0">&lt;</span>div id<span class="sy0">=</span><span class="st0">&quot;scrollview-content&quot;</span> <span class="kw2">class</span><span class="sy0">=</span><span class="st0">&quot;yui3-scrollview-loading&quot;</span><span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sy0">&lt;</span>ul<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sy0">&lt;</span>li<span class="sy0">&gt;&lt;</span>img src<span class="sy0">=</span><span class="st0">&quot;...&quot;</span><span class="sy0">&gt;&lt;/</span>li<span class="sy0">&gt;</span></div></li><li class="li2"><div class="de2">        <span class="sy0">&lt;</span>li<span class="sy0">&gt;&lt;</span>img src<span class="sy0">=</span><span class="st0">&quot;...&quot;</span><span class="sy0">&gt;&lt;/</span>li<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sy0">&lt;</span>li<span class="sy0">&gt;&lt;</span>img src<span class="sy0">=</span><span class="st0">&quot;...&quot;</span><span class="sy0">&gt;&lt;/</span>li<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">        <span class="sy0">&lt;</span>li<span class="sy0">&gt;&lt;</span>img src<span class="sy0">=</span><span class="st0">&quot;...&quot;</span><span class="sy0">&gt;&lt;/</span>li<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1">    <span class="sy0">&lt;/</span>ul<span class="sy0">&gt;</span></div></li><li class="li1"><div class="de1"><span class="sy0">&lt;/</span>div<span class="sy0">&gt;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="sy0">&lt;!--</span> Content <span class="kw1">with</span> a width which would require scrolling <span class="sy0">--&gt;</span>
<span class="sy0">&lt;</span>div id<span class="sy0">=</span><span class="st0">&quot;scrollview-content&quot;</span> <span class="kw2">class</span><span class="sy0">=</span><span class="st0">&quot;yui3-scrollview-loading&quot;</span><span class="sy0">&gt;</span>
    <span class="sy0">&lt;</span>ul<span class="sy0">&gt;</span>
        <span class="sy0">&lt;</span>li<span class="sy0">&gt;&lt;</span>img src<span class="sy0">=</span><span class="st0">&quot;...&quot;</span><span class="sy0">&gt;&lt;/</span>li<span class="sy0">&gt;</span>
        <span class="sy0">&lt;</span>li<span class="sy0">&gt;&lt;</span>img src<span class="sy0">=</span><span class="st0">&quot;...&quot;</span><span class="sy0">&gt;&lt;/</span>li<span class="sy0">&gt;</span>
        <span class="sy0">&lt;</span>li<span class="sy0">&gt;&lt;</span>img src<span class="sy0">=</span><span class="st0">&quot;...&quot;</span><span class="sy0">&gt;&lt;/</span>li<span class="sy0">&gt;</span>
        <span class="sy0">&lt;</span>li<span class="sy0">&gt;&lt;</span>img src<span class="sy0">=</span><span class="st0">&quot;...&quot;</span><span class="sy0">&gt;&lt;/</span>li<span class="sy0">&gt;</span>
    <span class="sy0">&lt;/</span>ul<span class="sy0">&gt;</span>
<span class="sy0">&lt;/</span>div<span class="sy0">&gt;</span></pre></div><textarea id="syntax-5cd930474ff67af2104ace2e5e4adf7f-plain"><!-- Content with a width which would require scrolling -->
<div id="scrollview-content" class="yui3-scrollview-loading">
    <ul>
        <li><img src="..."></li>
        <li><img src="..."></li>
        <li><img src="..."></li>
        <li><img src="..."></li>
    </ul>
</div></textarea></div>
<p>But this time, when we instantiate the ScrollView instance, we provide a fixed width, as opposed to a fixed height, for the widget.</p> 

<div id="syntax-25626821405279c8b55b07389d6d7e89" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// Constraining the width, instead of the height for horizontal scrolling</span></div></li><li class="li1"><div class="de1"><span class="kw2">var</span> scrollView <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">ScrollView</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    id<span class="sy0">:</span> <span class="st0">'scrollview'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    srcNode<span class="sy0">:</span> <span class="st0">'#scrollview-content'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">    width<span class="sy0">:</span> <span class="nu0">320</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    flick<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        minDistance<span class="sy0">:</span><span class="nu0">10</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        minVelocity<span class="sy0">:</span><span class="nu0">0.3</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        axis<span class="sy0">:</span> <span class="st0">&quot;x&quot;</span></div></li><li class="li2"><div class="de2">    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">scrollView.<span class="me1">render</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// Constraining the width, instead of the height for horizontal scrolling</span>
<span class="kw2">var</span> scrollView <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">ScrollView</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
    id<span class="sy0">:</span> <span class="st0">'scrollview'</span><span class="sy0">,</span>
    srcNode<span class="sy0">:</span> <span class="st0">'#scrollview-content'</span><span class="sy0">,</span>
    width<span class="sy0">:</span> <span class="nu0">320</span><span class="sy0">,</span>
    flick<span class="sy0">:</span> <span class="br0">&#123;</span>
        minDistance<span class="sy0">:</span><span class="nu0">10</span><span class="sy0">,</span>
        minVelocity<span class="sy0">:</span><span class="nu0">0.3</span><span class="sy0">,</span>
        axis<span class="sy0">:</span> <span class="st0">&quot;x&quot;</span>
    <span class="br0">&#125;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
scrollView.<span class="me1">render</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-25626821405279c8b55b07389d6d7e89-plain">// Constraining the width, instead of the height for horizontal scrolling
var scrollView = new Y.ScrollView({
    id: 'scrollview',
    srcNode: '#scrollview-content',
    width: 320,
    flick: {
        minDistance:10,
        minVelocity:0.3,
        axis: "x"
    }
});

scrollView.render();</textarea></div>
<p>This causes the list content (which has inline-block applied to each LI by the scrollview CSS) to be wider than the ScrollView, forcing horizontal scrolling. The height of the ScrollView in this case is driven by the height of it's content. As with the ScrollView Base example, we constrain flick handling to a specific axis, in this case the "x" axis.</p>

<p>The important CSS for the example, which switches the LIs to layout horizontally, is shown below, along with some tweaks requires for IE 6 and 7 support:</p>

<div id="syntax-ce3b97a1815c27a9ab3550c0fda917c0" class="yui-syntax-highlight"><div class="numbers"><pre class="css" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="coMULTI">/* To layout horizontal LIs */</span></div></li><li class="li1"><div class="de1"><span class="re0">#scrollview-content</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">white-space</span><span class="sy0">:</span><span class="kw2">nowrap</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1"><span class="re0">#scrollview-content</span> li <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">display</span><span class="re2">:inline-</span>block<span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">background-color</span><span class="sy0">:</span><span class="re0">#fff</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1"><span class="coMULTI">/* For IE 6/7 - needs inline block hack (and the background color mentioned above) */</span></div></li><li class="li1"><div class="de1"><span class="re0">#scrollview-content</span> li <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="sy0">*</span><span class="kw1">display</span><span class="sy0">:</span><span class="kw2">inline</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="sy0">*</span>zoom<span class="sy0">:</span><span class="nu0">1</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="css" style="font-family:monospace;"><span class="coMULTI">/* To layout horizontal LIs */</span>
<span class="re0">#scrollview-content</span> <span class="br0">&#123;</span>
    <span class="kw1">white-space</span><span class="sy0">:</span><span class="kw2">nowrap</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="re0">#scrollview-content</span> li <span class="br0">&#123;</span>
    <span class="kw1">display</span><span class="re2">:inline-</span>block<span class="sy0">;</span>
    <span class="kw1">background-color</span><span class="sy0">:</span><span class="re0">#fff</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="coMULTI">/* For IE 6/7 - needs inline block hack (and the background color mentioned above) */</span>
<span class="re0">#scrollview-content</span> li <span class="br0">&#123;</span>
    <span class="sy0">*</span><span class="kw1">display</span><span class="sy0">:</span><span class="kw2">inline</span><span class="sy0">;</span>
    <span class="sy0">*</span>zoom<span class="sy0">:</span><span class="nu0">1</span><span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div><textarea id="syntax-ce3b97a1815c27a9ab3550c0fda917c0-plain">/* To layout horizontal LIs */
#scrollview-content {
    white-space:nowrap;
}

#scrollview-content li {
    display:inline-block;
    background-color:#fff;
}

/* For IE 6/7 - needs inline block hack (and the background color mentioned above) */
#scrollview-content li {
    *display:inline;
    *zoom:1;
}</textarea></div>
<p><strong>NOTE:</strong> In the initial ScrollView release (3.2.0), the above CSS to layout LIs horizontally was bundled with the ScrollView CSS out-of-the-box. It has been removed as of the 3.3.0 release, since it makes it harder for developers to nest lists inside the ScrollView content, and in general, ScrollView is content agnostic.</p>

<h3>Preventing Native Behavior For Content</h3>

<p>In this example, since we have images which act as drag/flick targets, we need to stop the default image drag/drop behavior in certain browsers (for example gecko and IE), by preventing default on the underlying mousedown event. If we don't prevent default, the image will be natively draggable by default, and interfere with scrolling:</p>

<div id="syntax-0dc345d28b4792469521de60009719cf" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="co1">// Prevent the image from being natively dragged</span></div></li><li class="li1"><div class="de1">content.<span class="me1">delegate</span><span class="br0">&#40;</span><span class="st0">&quot;mousedown&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    e.<span class="me1">preventDefault</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="sy0">,</span> <span class="st0">&quot;img&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="co1">// Prevent the image from being natively dragged</span>
content.<span class="me1">delegate</span><span class="br0">&#40;</span><span class="st0">&quot;mousedown&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    e.<span class="me1">preventDefault</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="sy0">,</span> <span class="st0">&quot;img&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-0dc345d28b4792469521de60009719cf-plain">// Prevent the image from being natively dragged
content.delegate("mousedown", function(e) {
    e.preventDefault();
}, "img");</textarea></div>				</div>
				<div class="yui-u sidebar">
	
					<div id="examples" class="mod box4">
                        <div class="hd">
						<h4>
    ScrollView Examples:</h4>
                        </div>
						<div class="bd">
							<ul>
								<li><a href='../scrollview/scrollview-base.html'>Basic ScrollView Without a Scroll Indicator</a></li><li><a href='../scrollview/scrollview.html'>ScrollView with Scroll Indicator and Link Suppression Behavior.</a></li><li class='selected'><a href='../scrollview/scrollview-horiz.html'>Horizontal ScrollView</a></li><li><a href='../scrollview/scrollview-paging.html'>ScrollView Paginator Plugin</a></li>							</ul>
						</div>
					</div>

					<div class="mod box4">
                        <div class="hd">
						<h4>More ScrollView Resources:</h4>
                        </div>
                        <div class="bd">
						<ul>
							<!-- <li><a href="http://developer.yahoo.com/yui/scrollview/">User's Guide</a> (external)</li> -->
<li><a href="../../api/module_scrollview.html">API Documentation</a></li></ul>
                        </div>
					</div>
			  </div>
		</div>

		</div>
	</div>


<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator/index.html">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="History - Functional Examples" href="../../examples/history/index.html">History <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="Internationalization - Functional Examples" href="../../examples/intl/index.html">Internationalization</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="JSONP (JSON with Padding) - Functional Examples" href="../../examples/jsonp/index.html">JSONP <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Recordset - Functional Examples" href="../../examples/recordset/index.html">Recordset <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Resize - Functional Examples" href="../../examples/resize/index.html">Resize <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Sortable - Functional Examples" href="../../examples/sortable/index.html">Sortable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="item"><a title="Transition - Functional Examples" href="../../examples/transition/index.html">Transition <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Uploader - Functional Examples" href="../../examples/uploader/index.html">Uploader <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YQL Query - Functional Examples" href="../../examples/yql/index.html">YQL Query <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="AutoComplete - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Charts - Functional Examples" href="../../examples/charts/index.html">Charts <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataTable - Functional Examples" href="../../examples/datatable/index.html">DataTable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Dial - Functional Examples" href="../../examples/dial/index.html">Dial <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Editor - Functional Examples" href="../../examples/editor/index.html">Editor <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="selected "><a title="ScrollView - Functional Examples" href="../../examples/scrollview/index.html">ScrollView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="TabView - Functional Examples" href="../../examples/tabview/index.html">TabView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Grids - Functional Examples" href="../../examples/cssgrids/index.html">CSS Grids <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2011 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script language="javascript"> 
var yuiConfig = { filter: 'raw' };
</script>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>
</body>
</html>
